<template>
	<div class="wrapper">
		<div class="back-icon" @click="goBack()">
			<i class="fa fa-arrow-left"></i>
		</div>
		<!-- header部分 -->
		<header>
			<p>个人中心</p>
		</header>
	
		<!-- 个人列表部分 -->
		<ul class="user">
			<li class="userInfo-login" v-if="user!=null">
				<div class="userInfo-login-left">
					<div class="icon">
						<i class="fa fa-user-circle-o"></i>
					</div>
					<div class="text">
						<p class="userName">{{user.userName}}</p>
						<p class="userId">{{user.userId}}</p>
					</div>
				</div>
				<div class="userInfo-login-right">
					<i class="fa fa-cog" @click="toEditUserInfo()"></i>
				</div>
			</li>
			<li class="userInfo-logout" v-if="user==null" @click="login()">
				<div class="icon" >
					<i class="fa fa-user-circle"></i>
				</div>
				<div class="text">
					<p>未登录</p>
				</div>
			</li>
			<div class="updateUserAddress" v-if="user!=null" @click="toUserUserAddress()">
				<h5>店铺地址：</h5>
				<div class="order-info-address">
					<p>{{deliveryaddress!=null?deliveryaddress.address:'请选择店铺地址'}}</p>
					<i class="fa fa-angle-right"></i>
				</div>
				<p v-if="deliveryaddress==null"></p>
				<p v-if="deliveryaddress!=null">{{deliveryaddress.contactName}} {{deliveryaddress.contactTel}}</p>
			</div>
			<li class="updatePassword" v-if="user!=null" @click="toEditUserPassword()">
				<p>修改密码</p>
			</li>
			
			
			<div class="button">
				<button class="login" v-if="user==null" @click="login()">登录</button>
				<button class="logout" v-if="user!=null" @click="logout()">退出登录</button>
			</div>
		</ul>
	
		<!--底部菜单部分-->
		<MsFooter></MsFooter>
	</div>
</template>

<script>
	import MsFooter from '@/components/MsFooter.vue'
	import {useRouter} from 'vue-router'
	import {useRoute} from 'vue-router'
	import {ref,onMounted,getCurrentInstance, reactive} from 'vue';
	export default{
		name:'MerchantCenter',
		setup(){
			const currentInstance = getCurrentInstance();
			const router = useRouter();
			const route = useRoute();
			const user = ref({});
			const deliveryaddress = reactive({
			    address: '',
			    contactName: '',
			    contactTel: ''
			});
			const deliveryAddressArr = ref([]);
			const goBack = () => {
				router.go(-1);
			};
			const listDeliveryAddressByUserId = () => {
			            // 查询送货地址
			            currentInstance.appContext.config.globalProperties.$axios.post(
			                'BusinessController/listBusinessAddressBybusinessId', 
			                currentInstance.appContext.config.globalProperties.$qs.stringify({
			                    businessId: user.value?.userId
			                })
			            ).then(response => {
			                deliveryAddressArr.value = response.data;
			            
			                console.log('查询送货地址成功:', response.data); // 添加日志
			            
			                // 选择第一个地址作为默认地址
			                if (response.data && response.data.length > 0) {
			                    deliveryaddress.contactName = response.data[0].businessName;
			                    deliveryaddress.address = response.data[0].businessAddress;
			                    deliveryaddress.contactTel = "10086";
			            
			                    console.log('设置了默认地址信息:', deliveryaddress); // 添加日志
			                } else {
			                    console.log('没有找到送货地址'); // 添加日志
			                }
			            }).catch(error => {
			                console.error('查询送货地址失败:', error); // 添加日志
			            });
			        };

			const logout = () => {
							if(!confirm("确定要退出登录？")){
								return;
							}
							currentInstance.appContext.config.globalProperties.$removeSessionStorage('user');
							location.reload();
						}
			const login = () => {
				router.push({path:'/loginr'});
			}
			const toEditUserInfo = () => {
				router.push({name:'EditUserInfo'});
			}
			const toEditUserPassword = () => {
				router.push({name:'EditUserPassword'});
			}
			const toUserUserAddress = () => {
				swal("功能未开发");
			}
			onMounted(() => {
				user.value = currentInstance.appContext.config.globalProperties.$getSessionStorage('user');
				// 根据orderTypeId查询商家信息
				listDeliveryAddressByUserId();
				
			});
			
			return{
				user,
				goBack,
				logout,
				login,
				toEditUserInfo,
				toEditUserPassword,
				toUserUserAddress,
				deliveryaddress,
				listDeliveryAddressByUserId,
				deliveryAddressArr
			}
		},
		components:{
			MsFooter
		}
	}
</script>

<style scoped>
	/*********** 总容器 ***********/
	.wrapper {
		width: 100%;
		height: 100%;
	}
	/*********** 回退按钮 ***********/
	.wrapper .back-icon{
		width: 12vw;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*********** header部分 ***********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
	
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		/* 这行代码保证header位于最顶层，不加这一行会导致商家图片遮挡header，因为默认情况下，绝对位置的元素后写的位于上层 */
	
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.wrapper .back-icon{
		width: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.wrapper .user{
		width: 100%;
		margin-top: 12vw;
		margin-bottom: 14vw;
	}
	.wrapper .user li{
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
			
		display: flex;
		align-items: center;
	}
	.wrapper .user .updateUserAddress{
		width: 100%;
		margin-top: 0;
		background-color: #FFFFFF;
		box-sizing: border-box;
		border-bottom: solid 1px #DDD;
		padding: 2vw;
	}
	.wrapper .user .updateUserAddress h5{
		color: #666;
	}
	.wrapper .user .updateUserAddress .order-info-address{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		font-weight: 600;
		user-select: none;
		cursor: pointer;
		margin: 1vw 0;
	}
	.wrapper .user .updateUserAddress .order-info-address p{
		width: 90%;
		font-size: 4vw;
	}
	.wrapper .user .updateUserAddress .order-info-address i {
		font-size: 6vw;
	}
	.wrapper .user .userInfo-login{
		justify-content: space-between;
	}
	.wrapper .user .userInfo-login .userInfo-login-left{
		display: flex;
		align-items: center;
	}
	.wrapper .user .userInfo-login .userInfo-login-left .icon{
		width: 14vw;
		height: 14vw;
		font-size: 10vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wrapper .user .userInfo-login .userInfo-login-left .text{
		box-sizing: border-box;
		padding: 2.5vw;
	}
	.wrapper .user .userInfo-login .userInfo-login-left .text .userName{
		font-size: 5vw;
	}
	.wrapper .user .userInfo-login .userInfo-login-left .text .userId{
		font-size: 4vw;
		color: #666;
	}
	.wrapper .user .userInfo-login .userInfo-login-right{
		width: 14vw;
		height: 14vw;
		font-size: 8vw;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.wrapper .user .userInfo-logout{
		cursor: pointer;
	}
	.wrapper .user .userInfo-logout .icon{
		width: 14vw;
		height: 14vw;
		font-size: 10vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wrapper .user .userInfo-logout .text{
		box-sizing: border-box;
		padding: 2.5vw;
		font-size: 5vw;
	}
	.wrapper .user .credit{
		justify-content: space-between;
	}
	.wrapper .user .button{
		width: 100%;
		box-sizing: border-box;
		padding: 60vw 3vw 0 3vw;
	}
	.wrapper .user .button .logout {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		color: #fff;
		background-color: orangered;
		border-radius: 4px;
		border: none;
		outline: none;
	}
	.wrapper .user .button .login {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		color: #fff;
		background-color: #38CA73;
		border-radius: 4px;
		border: none;
		outline: none;
	}
</style>